<template>
          <div v-if="back !== ''" class="mv">
               <span class="iconfont icon-fangxianganniu2 back" @click="$router.go(-1)"></span>
          <ul>
            <li v-for="ele in back" :key="ele.song.id" @click="MusicPlay(ele.song.id)">
              <div class="imgbox">
                <img :src="ele.song.al.picUrl" alt="" />
              </div>
              <h3>{{ ele.song.name }}</h3>
            </li>
          </ul>
        </div>
</template>

<script>
import {getplayback} from '../api/Playback'
export default {
    props:["id"],
    data() {
      return {
        back:""
      }
    },
    methods:{
      MusicPlay(id){
         this.$emit("get-player-id", id);
      }
    },
created() {
    let id=JSON.parse(localStorage.getItem('uid'));
    getplayback({uid:id}).then(data=>{
this.back=data.allData;
console.log(data.allData);
    })
},
}
</script>

<style lang="less" scoped>
.mv {
  padding: 24px 16px 0 16px;
  position: relative;
        span {
        position: absolute;
        top: 10px;
        left: 8px;
        font-size: 16px;
        font-weight: 700;
      }
  li {
    display: flex;
    margin-bottom: 10px;
    .imgbox {
      width: 152px;
      height: 86px;
      margin-right: 10px;
      border-radius: 8px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    h3 {
      width: 172px;
      font-size: 14px;
      padding: 20px 0;
      font-weight: 700;
    }
  }
}
</style>